<template>
	<view class="content">

		  
			<!-- 商品详情长按点击事件 -->
		<view class="classify">
			
		<view v-for="(item2, id) in commodity" :key='id' @longpress="logoTime(item2, id)" :class="['classify-content',long==true ? 'zhe1':'']">
			<!-- <view  v-if="long" :class="['zhe',long==true ? 'zhe1':'']">1111111111111</view> -->
			<view class="classify-content-img" @click="goIndet2()">
				<image :src="item2.image" mode=""></image>
			</view>
			<view class="classify-content-name">
				{{item2.title}}
			</view>
			<view class="classify-content-jia">
				{{item2.money}}
			</view>
			<view class="classify-content-yh">
				<view class="classify-content-yh1">
					<image :src="item2.userimage" mode=""></image>
				</view>
				<view class="">
					{{item2.user}}
				</view>
			</view>
		</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import xflSelect from '../../../components/xfl-select/xfl-select.vue';     //导入
	export default {
		data() {
			return {
				long:false,
				member: true,
				city:['商品'],
				jishou2:[],
				citys: ['商品','寄售','易物'],
				 list: [       //要展示的数据
				                '商品',
				                // {value: '香蕉', disabled: true},
				                '寄售',
				                '易物'
				            ],
				search_criteria: [{
										"name": '全部',
										"selects": true
									},
									{
										"name": '皮草',
										"selects": false
									},
									{
										"name": '模型',
										"selects": false
									},
									{
										"name": 'Cosplay',
										"selects": false
									},
									{
										"name": '手办',
										"selects": false
									},
									{
										"name": '全部成员',
										"selects": false
									},
								],
								commodity: [
									{
										'id': '0',
										'title': '1这里是商品标题这里是商品标题这里是商品标题...',
										image: '../../../static/home/home-imgs1.png',
										userimage: '../../../static/mall/mall8.png',
										'money': '￥2839.92',
										'user': '这里用户名'
									},
									{
										'id': '1',
										'title': '2这里是商品标题这里是商品标题这里是商品标题...',
										image: '../../../static/home/home-imgs1.png',
										userimage: '../../../static/mall/mall8.png',
										'money': '￥2839.92',
										'user': '这里用户名'
									},{
										'id': '2',
										'title': '3这里是商品标题这里是商品标题这里是商品标题...',
										image: '../../../static/home/home-imgs1.png',
										userimage: '../../../static/mall/mall8.png',
										'money': '￥2839.92',
										'user': '这里用户名'
									},
									{
										'id': '3',
										'title': '4这里是商品标题这里是商品标题这里是商品标题...',
										image: '../../../static/home/home-imgs1.png',
										userimage: '../../../static/mall/mall8.png',
										'money': '￥2839.92',
										'user': '这里用户名'
									}
								],
								pages: 0,
								enterprise: false,
								revenue:false,
								titles:'成员详情'
			};
		},
		onLoad() {
			this.dianPing()
		},
		methods: {
		//寄售商品列表
		dianPing() {
			var that = this
			that.$http.req.ajax({
			     path: ':8090/web/idleWares/idleWaresList',
				 header: {
				       'token': uni.getStorageSync('token')
				      },
			     data: {
			    pageNum:'1',//页数
				 pageSize:'10',//	每页显示条数
				 waresType:'1',//寄售类型（1免费2付费）
				 cityCode:'0531',//城市编码
				 parentCategoryId:'1',//分类ID（父类）
				 categoryId:'15',//分类ID（子类）
				 
			     },
			     afterAjax: (res) => {
					 		console.log(res,'寄售商品列表接口')
					 		if (res.code !== 200) {
					 			console.log(res.data,'寄售商品列表接口错误')
					 		}
					 		if (res.code == 200) {
					 			console.log(res,'寄售商品列表通了')
								that.jishou2 = res.data
								uni.showToast({
									title: '拿到寄售商品列表',
									icon: 'none'
								})
					 		}
			     }
			    })
		},
			goIndet2() {
				uni.navigateTo({
					url:'../../commodity-details/indet2'
				})
			},
			logoTime(e) {
				console.log("长按事件");
				this.long=true
				console.log(e, '长按拿到的数据')
				if(this.id==0) {
					
				}
			},
			
			// 返回上一页
			backs() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 点击切换全部等列表
			searchcriteria(i) {
				this.search_criteria.forEach((el, index) => {
					if (index == i) {
						el.selects = true
					} else {
						el.selects = false
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.content {
		.top-search {
			margin: 18rpx 25rpx;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
		
		
		.search-right {
			// background: #f5f5f5 url('../../static/search.png') no-repeat 25rpx 25rpx;
			font-size: 25rpx;
			background-size: 25rpx 25rpx;
			width: 100%;
			height: 72rpx;
			border: 1px solid #fcda22;
			border-radius: 36rpx;
			.icons1 {
				position: absolute;
				margin: 5rpx 25rpx;
			}
			input {
				text-align: left;
				margin-left: 69rpx;
				margin-top: 25rpx;
				font-size: 25rpx;
			}
		}
		}
		// 分类
		
			.classify-title {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				width: 722rpx;
				height: 90rpx;
				button {
					width: 97rpx;
					height: 50rpx;
					font-size: 21rpx;
					text-align: center;
					border-radius: 36rpx;
				}
				.classify-title-btn {
					background-color: fcca22;
				}
			
			}
		
		// 分类内容
		.classify {
			flex-wrap: wrap;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			// 遮罩层
			.zhe {
				background-color: #F5F5F5;
			}
			.zhe1 {
				z-index: 999;
				background-color: rgb(0,0,0.2);
				background-color: #b0b0b0;
				width: 333rpx;
				height: 500rpx;
				margin-top: 18rpx;
			}
			// 遮罩层
			.classify-content {
			
				width: 333rpx;
				margin-top: 18rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.classify-content-img {
					width: 333rpx;
					height: 333rpx;
					image {
						max-width: 100%;
						height: 100%;
						
					}
				}
				.classify-content-name {
					margin: 18rpx;
					font-size: 25rpx;
					font-weight: Medium;
					
				}
				.classify-content-jia {
					margin: 18rpx;
					font-size: 25rpx;
					color: #eb3e3e;
				}
				.classify-content-yh {
					display: flex;
					flex-direction: row;
					justify-content: left;
					font-size: 18rpx;
					color: #20212d;
					.classify-content-yh1 {
						margin-right: 14rpx;
						width: 36rpx;
						height: 36rpx;
						image {
							max-width: 100%;
							max-height: 100%;
						}
					}
				}
				.classify-content-yh {
					display: flex;
					flex-direction: row;
					justify-content: left;
					font-size: 18rpx;
					color: #20212d;
					.classify-content-yh1 {
						margin-right: 14rpx;
					}
				}
			}
		}
		// 同城内容
		.local-banner {
			width: 699rpx;
			height: 192rpx;
			margin: 21rpx 25rpx;
			
			image {
				max-width: 100%;
				max-height: 100%;
				border-radius: 14rpx;
				
			}
		}
				.local-title {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					width: 722rpx;
					height: 90rpx;
					margin-top: 41rpx;
					margin-bottom: 41rpx;
				
				}
				.list_time {
					width: 100%;
					height: 141rpx;
					font-size: 21rpx;
					color: #21201D;
				}
				.list_times{
					height: 99rpx
				}
				.list_time .uni-combox__input {
				    font-size: 21rpx;
				}
				.transparents{
					color: transparent;
				}
				.search_criterias {
					width: 538rpx;
					margin-top: 10rpx;
					margin-left: 25rpx;
					overflow: scroll;
					white-space: nowrap;
					height: 50rpx;
					float: left;
				}
				
				.search_criterias text {
					padding: 9rpx 25rpx;
					font-size: 21rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #21201D;
					border: 1px solid #EEEEEE;
					border-radius: 47rpx;
					opacity: 1;
					margin-right: 18rpx;
				}
				.selectActive {
					background: #FFDC1D;
				}
			.select_member {
				width: 121rpx;
				height: 80rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				float: right;
				margin-top: 1rpx;
			}
	
}
</style>
